<template>
  <div class="notfound">
    <a-result status="404" title="404" sub-title="页面不存在">
      <template #extra>
        <a-button type="primary" @click="this.$router.push('/')">返回主页</a-button>
      </template>
    </a-result>
  </div>
</template>

<style scoped lang="scss">
.notfound {
  .card {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
  }

  display: flex;
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  flex-direction: row;
}

@media screen and (max-width:800px) {
  .notfound {
    .card {
      margin-top: 30%;
      margin-bottom: 45.1%;
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      flex-direction: column;
    }

    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: row;
  }
}
</style>
